<template>
  <div class="container">
    <h2 class="form_title title">创建用户</h2>
    <InputForm
        :columns="columns"
        :handler="handler"
        :model="signUpForm"
        :need-button="true"
        :rules="rules"
        :show-label="false"
        button-content="注册"
        form-style="width: 300px"
    />
  </div>
</template>

<script setup>
import {inject, ref} from "vue";
import InputForm from "../common/InputForm.vue";
import {register} from "../../api/userApi.js";
import {useMessage} from "naive-ui";
import {useRouter} from "vue-router";
import {MD5} from "../../utils/utils.js";

const message = useMessage()
const router = useRouter()
const secretKey = inject('secretKey')

const signUpForm = ref({
  userName: null,
  nickName: null,
  password: null,
  passwordConfirm: null,
  email: null,
})

const columns = ref([
  {
    name: "userName",
    style: "width: 300px",
    round: true,
    placeholder: "用户名",
  },
  {
    name: "nickName",
    style: "width: 300px",
    round: true,
    placeholder: "昵称",
  },
  {
    name: "originPassword",
    style: "width: 300px",
    round: true,
    placeholder: "密码",
    type: "password",
    showPasswordOn: "mousedown"
  },
  {
    name: "originPasswordConfirm",
    style: "width: 300px",
    round: true,
    placeholder: "确认密码",
    type: "password",
    showPasswordOn: "mousedown"
  },
  {
    name: "email",
    style: "width: 300px",
    round: true,
    placeholder: "邮箱",
  },
])

const rules = {
  userName: [
    {
      required: true,
      message: "嗨呀，用户名不写咋登陆呀😲",
      trigger: ['blur', 'input']
    }
  ],
  nickName: [
    {
      required: true,
      message: "想要别人怎么称呼你呢🤔",
      trigger: ['blur', 'input']
    }
  ],
  password: [
    {
      validator: validatePassword,
      trigger: ['blur', 'input']
    }
  ],
  passwordConfirm: [
    {
      validator: validatePasswordConfirm,
      trigger: ['blur', 'input']
    }
  ],
  email: [
    {
      validator: validateEmail,
      trigger: ['blur', 'input']
    }
  ],
}

// function validateUserName
function validatePassword(rule, value) {
  if (!value) {
    return new Error("喂喂喂还没输密码呢😫")
  }
  if (!/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{8,20}$/.test(value)) {
    return new Error("必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-20 之间😫")
  }
  return true;
}

function validatePasswordConfirm(rule, value) {
  if (!value) {
    return new Error("密码还要二次确认的😫")
  }
  if (value !== signUpForm.value.password) {
    return new Error("两次输入的密码不一样😫")
  }
  return true;
}

function validateEmail(rule, value) {
  if (!value) {
    return new Error("邮箱也可以用来登陆的，一般人我不告诉他🙊")
  }
  if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
    return new Error("邮箱格式好像不对呀😫")
  }
  return true;
}

function handler() {
  signUpForm.value.password = MD5(secretKey.value, signUpForm.value.originPassword)
  signUpForm.value.passwordConfirm = MD5(secretKey.value, signUpForm.value.originPasswordConfirm)
  delete signUpForm.value.originPassword
  delete signUpForm.value.originPasswordConfirm
  register(signUpForm.value).then(resp => {
    console.log('resp', resp)
    message.success("注册成功")
    router.push('/login')
  }).catch(err => {
    console.log('err', err)
  })
}
</script>

<style scoped>
@import '../../css/login.css';
</style>